<template>
    <div v-if="Object.keys(list).length !==0">
        <Title title="产品管理"></Title>
        <div class="product">
            <!-- 左侧audio -->
            <div class="audio">
                <!-- 被控制层 -->
                <img src="../../assets/images/组 18@2x.png" alt="">
                <!-- 点击控制audio -->
                <van-icon name="play" @click="change" class="icon" size="30" color="red"/>
                <!-- audio -->
                <div class="audioList">
                    <audio class="music" :src="this.list[0].fileUrl" controls ref="music"></audio>
                </div>
            </div>
            <!-- 右侧信息 -->
            <div class="minute">
                <img src="../../assets/images/Rectangle 6备份.png" alt="">
                <p class="titleName">
                    {{this.list[0].fileName}}
                </p>
                <div class="xian"></div>
                <p class="mes">
                    信息
                </p>
                <div class="neirong">
                    <p>创建时间</p>
                    <p>{{this.list[0].createDate}}</p>
                </div>
                <div class="neirong">
                    <p>修改时间</p>
                    <p>{{this.list[0].updateDate}}</p>
                </div>
                <div class="neirong">
                    <p>持续时间</p>
                    <p>45:57</p>
                </div>
                <div class="neirong">
                    <p>内容创作者</p>
                    <p>{{this.list[0].operator}}</p>
                </div>
                <div class="neirong">
                    <p>大小</p>
                    <p>{{this.list[0].fileSize}}</p>
                </div>
                <div class="neirong">
                    <p>文件类型</p>
                    <p>.mp3</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Title from '../../components/title';
    import "swiper/dist/css/swiper.min.css";
    import {queryProduct} from "../../api/api";

    export default {
        name: 'ProductView',
        components: {
            Title
        },
        props: {},
        data() {
            return {
                list: []
            };
        },
        mounted() {
            queryProduct(this.$route.query.id).then(res => {
                console.log(res)
                this.list = res.list
            })
        },
        methods: {
            change() {
                var audio =this.$refs.music[0]
                if (audio.paused) {
                    audio.play()
                } else {
                    audio.pause()
                }
            }
        },
    };
</script>

<style lang="less" scoped>
    .product {
        width: 1136px;
        height: 758px;
        border-radius: 2px;
        border: 1px solid #E9E9E9;
    }

    .audio {
        width: 866px;
        height: 741px;
        background: #FFFFFF;
        float: left;
        position: relative;
        img{
            width: 464px;
            height: 472px;
            margin-left: 46px;
            margin-top: 38px;
            border-radius: 10px;
            }
        .icon{
            width: 30px;
            height: 30px;
            position: absolute;
            left: 85px;
            top: 445px;
            }
        .audioList{
            width:787px;
            height:34px;
            margin: 54px 0 0 40px;
            audio{
                width: 100%;
                height: 100%;
                // border-radius: 0%;
                // background-color: #000000;
            }
        }
    }

    /*右侧详细信息*/
    .minute {
        width: 266px;
        height: 758px;
        float: right;
        background: #FFFFFF;
        text-align: center;
    }

    img {
        width: 214px;
        height: 110px;
        margin-top: 19px;
    }

    .titleName {
        width: 224px;
        margin-left: 19px;
        margin-top: 16px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        /*line-height: 22px;*/
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xian {
        width: 220px;
        height: 1px;
        background: #E8E8E8;
        margin: 16px auto;
    }

    .mes {
        width: 28px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 22px;
        margin-left: 19px;
        margin-bottom: 8px;
    }

    .neirong {
        width: 220px;
        height: 38px;
        margin: 0 auto;
        border-bottom: 1px solid #E8E8E8;
        p{
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            line-height: 22px;
            margin-top: 8px;
            margin-bottom: 0;
        }

    }

    .neirong {
        p:nth-of-type(1){
            float: left;
        }
        p:nth-of-type(2){
            float: right;
        }
    }
</style>
